/* 
  目标: 了解非受控组件-  
  含义：非受控组件： 表单元素的value值， 由DOM控制，不受state的控制
*/
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  handleSubmit = (e) => {
    // DOM-获取表单元素的值
    let formData = {
      username: document.querySelector('#username').value,
      desc: document.querySelector('#desc').value,
    };
    console.log(formData);
  };

  handleChange = (e) => {
    // DOM-修改表单元素的值
    console.log(e.target.value, 'value');
  };

  render() {
    return (
      <div>
        姓名：
        {/* 1.给表单元素设置name属性， */}
        {/* 3.给绑定value属性的表单元素，使用同一个事件处理函数 */}
        <input type="text" name="username" id="username" onChange={this.handleChange} />
        <br />
        描述：<textarea name="desc" id="desc" onChange={this.handleChange}></textarea>
        <br />
        城市：
        <select name="city">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input type="checkbox" name="isSingle" />
        <button onClick={this.handleSubmit}>点击提交表单</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
